<template>
  <section id="featured" class="py-16 md:py-24 bg-neutral">
    <div class="container mx-auto px-4">
      <!-- 标题区域 - 滚动动画 -->
      <div class="text-center mb-16 scroll-animate">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary mb-4">精选拍品</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">从海量拍品中精选优质艺术品，满足不同收藏需求</p>
      </div>

      <!-- 分类筛选 - 滚动动画 -->
      <div class="flex flex-wrap justify-center gap-3 mb-12 scroll-animate">
        <button
          class="px-5 py-2 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105"
          :class="
            activeCategory === 'all'
              ? 'bg-primary text-white'
              : 'bg-white hover:bg-primary/5 text-dark'
          "
          @click="activeCategory = 'all'"
        >
          全部
        </button>
        <button
          class="px-5 py-2 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105"
          :class="
            activeCategory === category.id
              ? 'bg-primary text-white'
              : 'bg-white hover:bg-primary/5 text-dark'
          "
          v-for="(category, index) in categories"
          :key="category.id"
          @click="activeCategory = category.id"
          :style="{ animationDelay: `${index * 0.1}s` }"
        >
          {{ category.name }}
        </button>
      </div>

      <!-- 拍品列表容器 - 每次分类切换时重新渲染以避免动画冲突 -->
      <div
        :key="activeCategory"
        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
      >
        <!-- 有数据时显示拍品 -->
        <div
          v-for="(item, index) in filteredItems"
          :key="item.id"
          class="bg-white rounded-xl overflow-hidden shadow-md hover-lift group"
          :class="{ 'scroll-animate': !animationTriggered }"
          :style="{ animationDelay: `${(index % 4) * 0.15}s` }"
        >
          <div class="relative overflow-hidden">
            <img
              :src="item.image"
              :alt="item.name"
              class="w-full h-56 object-cover transition-transform duration-700 group-hover:scale-110"
            />
            <div class="absolute top-3 right-3">
              <button
                class="bg-white/80 hover:bg-white text-gray-600 hover:text-red-500 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 transform hover:scale-110"
                @click="toggleFavorite(item.id, $event)"
              >
                <i :class="item.isFavorite ? 'fa fa-heart' : 'fa fa-heart-o'"></i>
              </button>
            </div>
            <div
              class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
            >
              <router-link
                :to="`/item/${item.id}`"
                class="w-full bg-white text-primary text-sm font-medium py-1.5 rounded-md block text-center transform transition-transform duration-300 hover:scale-105"
              >
                查看详情
              </router-link>
            </div>
          </div>
          <div class="p-4">
            <div class="text-xs text-gray-500 mb-1">{{ item.period }}</div>
            <h3
              class="font-bold text-lg mb-2 group-hover:text-primary transition-colors duration-300"
            >
              {{ item.name }}
            </h3>
            <div class="flex justify-between items-center">
              <div>
                <div class="text-xs text-gray-500">当前出价</div>
                <div class="text-primary font-bold">{{ item.currentPrice }}</div>
              </div>
              <div class="text-right">
                <div class="text-xs text-gray-500">出价次数</div>
                <div class="font-medium">{{ item.bidCount }}次</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 无数据时显示提示 -->
        <div v-if="filteredItems.length === 0" class="col-span-full text-center py-16">
          <div class="text-gray-400 mb-4">
            <i class="fa fa-search fa-3x"></i>
          </div>
          <p class="text-gray-500">该分类暂无拍品，敬请期待</p>
          <button
            class="mt-4 bg-primary text-white px-5 py-2 rounded-full text-sm font-medium"
            @click="activeCategory = 'all'"
          >
            查看全部拍品
          </button>
        </div>
      </div>

      <!-- 加载更多按钮 -->
      <div class="text-center mt-12" v-if="filteredItems.length > 0">
        <button
          class="bg-white border border-primary text-primary hover:bg-primary/10 font-medium py-3 px-8 rounded-md transition-all duration-300 transform hover:scale-105"
          @click="loadMoreItems"
        >
          加载更多拍品
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeCategory = ref('all')
const animationTriggered = ref(false) // 控制动画是否触发

const categories = ref([
  { id: 'painting', name: '书画', icon: 'fa fa-paint-brush', itemsCount: 1246 },
  { id: 'porcelain', name: '瓷器', icon: 'fa fa-envira', itemsCount: 852 },
  { id: 'jade', name: '玉器', icon: 'fa fa-diamond', itemsCount: 638 },
  { id: 'jewelry', name: '珠宝', icon: 'fa fa-diamond', itemsCount: 425 },
  { id: 'watch', name: '钟表', icon: 'fa fa-clock-o', itemsCount: 318 },
  { id: 'misc', name: '杂项', icon: 'fa fa-random', itemsCount: 742 },
])

// 确保每个分类都有充足数据
const items = ref([
  // 瓷器类
  {
    id: 1,
    name: '青花缠枝莲纹赏瓶',
    image: 'https://picsum.photos/id/1059/400/300',
    period: '清代 · 康熙年间',
    currentPrice: '¥1,280,000',
    bidCount: 42,
    category: 'porcelain',
    isFavorite: false,
  },
  {
    id: 9,
    name: '汝窑天青釉盘',
    image: 'https://picsum.photos/id/1076/400/300',
    period: '宋代 · 汝窑',
    currentPrice: '¥3,280,000',
    bidCount: 87,
    category: 'porcelain',
    isFavorite: false,
  },
  {
    id: 10,
    name: '官窑贯耳瓶',
    image: 'https://picsum.photos/id/1080/400/300',
    period: '宋代 · 官窑',
    currentPrice: '¥5,280,000',
    bidCount: 76,
    category: 'porcelain',
    isFavorite: false,
  },

  // 书画类
  {
    id: 2,
    name: '启功 行书七言联',
    image: 'https://picsum.photos/id/1060/400/300',
    period: '近现代 · 1956年',
    currentPrice: '¥860,000',
    bidCount: 35,
    category: 'painting',
    isFavorite: false,
  },
  {
    id: 6,
    name: '吴昌硕 花卉图轴',
    image: 'https://picsum.photos/id/1072/400/300',
    period: '近现代 · 1920年',
    currentPrice: '¥1,560,000',
    bidCount: 47,
    category: 'painting',
    isFavorite: false,
  },
  {
    id: 12,
    name: '齐白石 虾趣图',
    image: 'https://picsum.photos/id/1077/400/300',
    period: '近现代 · 1948年',
    currentPrice: '¥4,560,000',
    bidCount: 102,
    category: 'painting',
    isFavorite: false,
  },

  // 珠宝类
  {
    id: 3,
    name: '18K白金钻石项链',
    image: 'https://picsum.photos/id/1061/400/300',
    period: '现代 · 2023年',
    currentPrice: '¥520,000',
    bidCount: 28,
    category: 'jewelry',
    isFavorite: false,
  },

  // 钟表类
  {
    id: 4,
    name: '百达翡丽鹦鹉螺系列',
    image: 'https://picsum.photos/id/1063/400/300',
    period: '现代 · 2022年',
    currentPrice: '¥1,980,000',
    bidCount: 56,
    category: 'watch',
    isFavorite: false,
  },

  // 玉器类
  {
    id: 5,
    name: '和田玉手镯',
    image: 'https://picsum.photos/id/1071/400/300',
    period: '清代 · 乾隆年间',
    currentPrice: '¥380,000',
    bidCount: 18,
    category: 'jade',
    isFavorite: false,
  },
  {
    id: 11,
    name: '翡翠平安扣',
    image: 'https://picsum.photos/id/1075/400/300',
    period: '清代 · 道光年间',
    currentPrice: '¥680,000',
    bidCount: 29,
    category: 'jade',
    isFavorite: false,
  },

  // 杂项类
  {
    id: 7,
    name: '青铜三足鼎',
    image: 'https://picsum.photos/id/1074/400/300',
    period: '明代 · 宣德年间',
    currentPrice: '¥2,180,000',
    bidCount: 63,
    category: 'misc',
    isFavorite: false,
  },
])

// 计算属性 - 筛选拍品
const filteredItems = computed(() => {
  if (activeCategory.value === 'all') {
    return [...items.value]
  }
  return items.value.filter((item) => item.category === activeCategory.value)
})

// 监听分类变化，重置动画状态
watch(activeCategory, () => {
  animationTriggered.value = false
  // 短暂延迟后重新触发动画
  setTimeout(() => {
    setupScrollAnimations()
    animationTriggered.value = true
  }, 100)
})

// 收藏功能
const toggleFavorite = (id, e) => {
  e.preventDefault()
  e.stopPropagation()
  const item = items.value.find((item) => item.id === id)
  if (item) {
    item.isFavorite = !item.isFavorite
    ElMessage({
      message: item.isFavorite ? '已添加到收藏' : '已从收藏中移除',
      type: 'success',
    })
  }
}

// 加载更多拍品
const loadMoreItems = () => {
  const newItems = [
    {
      id: items.value.length + 1,
      name: '翡翠摆件',
      image: 'https://picsum.photos/id/1081/400/300',
      period: '清代 · 咸丰年间',
      currentPrice: '¥780,000',
      bidCount: 32,
      category: 'jade',
      isFavorite: false,
    },
    {
      id: items.value.length + 2,
      name: '傅抱石 山水图',
      image: 'https://picsum.photos/id/1082/400/300',
      period: '近现代 · 1952年',
      currentPrice: '¥3,260,000',
      bidCount: 87,
      category: 'painting',
      isFavorite: false,
    },
    {
      id: items.value.length + 3,
      name: '江诗丹顿传承系列',
      image: 'https://picsum.photos/id/1083/400/300',
      period: '现代 · 2020年',
      currentPrice: '¥1,280,000',
      bidCount: 53,
      category: 'watch',
      isFavorite: false,
    },
    {
      id: items.value.length + 4,
      name: '珐琅彩瓷碗',
      image: 'https://picsum.photos/id/1084/400/300',
      period: '清代 · 雍正年间',
      currentPrice: '¥2,880,000',
      bidCount: 91,
      category: 'porcelain',
      isFavorite: false,
    },
  ]

  newItems.forEach((item, index) => {
    setTimeout(() => {
      items.value = [...items.value, item]
    }, index * 300)
  })

  ElMessage({ message: '已加载更多拍品', type: 'success' })
}

// 滚动动画观察器
const setupScrollAnimations = () => {
  // 先清除所有动画类
  document.querySelectorAll('.scroll-animate').forEach((el) => {
    el.classList.remove('animate-in')
  })

  // 重新应用动画
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-in')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1 }
  )

  document.querySelectorAll('.scroll-animate').forEach((el) => {
    observer.observe(el)
  })
}

onMounted(() => {
  setupScrollAnimations()
  animationTriggered.value = true
})
</script>

<style scoped>
/* 滚动动画 */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 悬停提升效果 */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 确保分类切换时容器重新渲染 */
.grid {
  transition: all 0.3s ease;
}
</style>
